<template>
	<view>
		<view class="search">
			<input v-model="keyword" class="searchbox" type="text" value="" placeholder="输入账单相关信息" />
		</view>
		<view class="">
			<text class="money">支出 ￥{{-expenditure}}</text> 
		</view>
		<view class="">
			<text class="money">收入 ￥{{(income).toFixed(2)}}</text>
		</view>
		<view class="analyse">
			<navigator url="../analysis/analysis">
				<text>收支分析 ></text>
			</navigator>
		</view>
		<view class="bill-item" v-for="item in searchbills" :key="item.orderNumber">
			<navigator :url="'../billdetail/billdetail?id='+item.orderNumber">
				<view class="left">
					<text class="item-1">{{item.productName}}</text>
					<text class="item-2">{{item.productType}}</text>
				</view>
			</navigator>
				<view class="right">
					<text :class="item.modifiedPrice>0?'red':'green'">{{item.modifiedPrice}}</text>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				'bills': [],
				"limit": 10,
				"keyword": ""
			}
		},
		onReachBottom() {
			setTimeout(res => {
				this.limit += 10
			}, 3000)
		},
		computed: {
			searchbills() {
				if (this.keyword) {
					return this.bills.filter(item => {
						return item.productName.includes(this.keyword)
					})
				}else{
					return  this.bills.slice(0, this.limit)
				}
			},
			income(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice>=0
				});
				console.log(newarr);
				return newarr.reduce(function(item,next){
					return item+next.modifiedPrice
				},0);
			},
			expenditure(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice<=0
				});
				console.log(newarr);
				return newarr.reduce(function(item,next){
					return item+next.modifiedPrice
				},0);
			}
		},
		async onLoad() {
			const billBean = {
				"bankCardId": 0,
				"couponId": 1,
				"couponName": "",
				"couponValue": 0,
				"createTime": "",
				"description": "",
				"isloan": 0,
				"memberName": "",
				"modifiedPrice": 0,
				"modifiedTime": "",
				"orderNumber": 0,
				"orderType": "",
				"payPassword": "",
				"payType": "",
				"pid": 0,
				"productId": 0,
				"productName": "",
				"productType": "",
				"share": 0,
				"status": 0,
				"transactionFee": 0,
				"transactionNumber": 0
			}
			const res = await this.$http.bill.selectNewOrder(billBean)
			this.bills = res.slice(3)
			console.log(this.bills);
		},
		methods: {

		}
	}
</script>

<style scoped>
	.bill-item {
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		border: 1rpx solid #ffffff;
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.left {
		width: 300rpx;
		height: 100rpx;
		line-height: 50rpx;
	}

	.right {
		width: 200rpx;
		height: 100rpx;
		text-align: center;
		margin-right: 40rpx;
	}

	.item-1 {
		width: 300rpx;
		display: block;
		font-weight: bold;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.item-2 {
		color: #ACACAC;
		font-size: 30rpx;
	}

	.red {
		color: red;
		font-weight: bold;
	}

	.green {
		color: green;
		font-weight: bold;
	}

	.search {
		width: 700rpx;
		height: 100rpx;
		margin: 0 auto;
		border: 1rpx #007AFF;
	}
	.searchbox {
		width: 400rpx;
		height: 50rpx;
		background-image: url(../../static/borrow/small.png);
		background-repeat: no-repeat;
		padding-left: 50rpx;
		border: 1rpx #007AFF;
		background-position: 10rpx 10rpx;
	}
	.money{
		font-size: 30rpx;
		margin-left: 40rpx;
		font-weight: 40rpx;
	}
	.analyse{
		margin-left: 40rpx;
		font-weight: 40rpx;
	}
</style>
